<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="UTF-8">
        <title>添加用户</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
        <link rel="stylesheet" th:href="${urls.getForLookupPath('/css/font.css')}">
        <link rel="stylesheet" th:href="${urls.getForLookupPath('/css/xadmin.css')}">
        <script th:src="${urls.getForLookupPath('/lib/layui/layui.js')}" charset="utf-8"></script>
        <script type="text/javascript" th:src="${urls.getForLookupPath('/js/xadmin.js')}"></script>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>昵称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="nickname" name="nickname" lay-verify="nickname" autocomplete="off"
                                   placeholder="请输入昵称"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="username" name="username" lay-verify="username" autocomplete="off"
                                   placeholder="请输入用户名"
                                   class="layui-input" onchange="checkExist()">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <span id="usernametip" class="x-red" style="font-weight: bold;"></span>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>密码</label>
                        <div class="layui-input-inline">
                            <input type="password" id="password" name="password" lay-verify="password"
                                   autocomplete="off" placeholder="请输入密码"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>确认密码</label>
                        <div class="layui-input-inline">
                            <input type="password" id="repasswd" name="repasswd" lay-verify="repasswd"
                                   autocomplete="off"
                                   placeholder="请再次输入密码" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>角色选择</label>
                        <div class="layui-input-inline">
                            <select name="role">
                                <option value="user">普通用户</option>
                                <option value="admin">管理员</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>拥有权限
                        </label>
                        <table class="layui-table layui-input-block">
                            <tbody>
                            <div class="layui-input-block">
                                <input name="permission" lay-skin="primary" type="checkbox" value="A" title="添加权限">
                                <input name="permission" lay-skin="primary" type="checkbox" value="C" title="修改权限">
                                <input name="permission" lay-skin="primary" type="checkbox" value="S" title="查询权限">
                                <input name="permission" lay-skin="primary" type="checkbox" value="D" title="删除权限">
                            </div>
                            </tbody>
                        </table>
                    </div>

                    <div class="layui-form-item">
                        <button lay-filter="add" id="addbutton" lay-submit="" class="layui-btn layui-btn-fluid">确认添加</button>
                    </div>
                </form>
            </div>
        </div>
        <script>
            layui.use(['form', 'layer'], function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;

                //自定义验证规则
                form.verify({
                    nikename: function (value) {
                        if (value.length === 0) {
                            return '请输入昵称！';
                        }else if(value.length > 10){
                            return '昵称长度不能超过10!';
                        }
                    },
                    username: function (value) {
                        if (value.length === 0) {
                            return '请输入用户名！';
                        }else if(value.length > 10){
                            return '用户名长度不能超过10!';
                        }
                    },
                    password: function (value) {
                        if (value.length === 0) {
                            return '密码不能为空！';
                        }else if(value.length > 15){
                            return '密码长度不能超过15!';
                        }
                        if (value !== $('#repasswd').val()) {
                            return '两次密码不相同！';
                        }
                    }

                });

                //监听提交
                form.on('submit(add)', function (data) {
                    var userPers = [];
                    $("input:checkbox[name=permission]:checked").each(function () {
                        //console.log($(this).val());
                        userPers.push($(this).val());
                    })
                    //console.log(data.field);
                    //console.log(userPers);
                    // 使用ajax传递数据
                    SendData = $.ajax({
                        type: "POST",
                        url: "/adminmanage/addUser",
                        data: {
                            nickname: data.field.nickname,
                            username: data.field.username,
                            password: data.field.password,
                            role: data.field.role,
                            permission: userPers.toString(),
                        },
                        success: function () {
                            layer.alert('添加成功！', {
                                    icon: 6
                                },
                                function () {
                                    xadmin.father_reload();     // 对父窗口进行刷新
                                    xadmin.close();         // 关闭当前 frame
                                });
                        },
                        error: function () {
                            layer.alert('添加失败！', {icon: 5});
                        }
                    });

                    // 等待 ajax 执行完毕
                    $.when(SendData).done(function (value) {

                    });
                    return false;
                });
            });

            // 监听用户名是否已经存在
            function checkExist(){
                var username =document.getElementById('username').value;
                $.ajax({
                    url: "/adminmanage/checkExit/" + username,
                    type:"GET",
                    success: function (result) {
                        if (result === 'exist'){
                            $('#usernametip').html("此用户名已经存在!");
                            $('#addbutton').attr("disabled", "true");
                        }else{
                            $('#usernametip').html("此用户名可用!");
                            $('#addbutton').removeAttr("disabled");
                        }
                    }
                })
            }
        </script>
    </body>

</html>
